<%@page import="com.shoeshopping.entity.User"%>
<%@page import="com.shoeshopping.entity.Goods"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

User user = ((User)session.getAttribute("user"));
String username = null;
if(user!=null){
	username = user.getUsername();
}
%>

<!DOCTYPE HTML>
<html>
	<head>
	 	<base href="<%=basePath%>">
		<title>Details</title>
		
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!----webfonts---->
		<link href='css/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<!----//webfonts---->
		<script src="js/jquery.min.js"></script>
		<!----start-alert-scroller---->
		<script type="text/javascript" src="js/jquery.easy-ticker.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$('#demo').hide();
		});
		</script>	
		<!----start-alert-scroller---->
		<!-- start menu -->
		<link href="css/megamenu.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/megamenu.js"></script>
		<script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
		<script src="js/menu_jquery.js"></script>
		<!-- //End menu -->
		<!---move-top-top---->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
				});
			});
		</script>
		<script src="js/jquery-1.9.1.min.js"></script>
		    <script src="js/owl.carousel.js"></script>
		   <!-- //Owl Carousel Assets -->
	</head>
	<body>
				<div class="header">
			
				<%//jsp include进 top-header %>
				<jsp:include page="/component/top-header.jsp" flush="true">
						<jsp:param value='<%=username %>' name="username"/>
				</jsp:include>
				
				<%//jsp include进 middle-header %>
				<jsp:include page="/component/middle-header.jsp" flush="true"/>
				
				<%//jsp include进 middle-header %>
				<jsp:include page="/component/bottom-header.jsp" flush="true"/>
				
				</div>
		<!--- start-content---->
		<div class="content details-page">
			<!---start-product-details--->
			<div class="product-details">
				<div class="wrap">
					<ul class="product-head">
						<li><s:property value="getGoods().getName()"></s:property></li>
						<div class="clear"> </div>
					</ul>
				<!----details-product-slider--->
				<!-- Include the Etalage files -->
					<link rel="stylesheet" href="css/etalage.css">
					<script src="js/jquery.etalage.min.js"></script>
				<!-- Include the Etalage files -->
				<script>
						jQuery(document).ready(function($){
			
							$('#etalage').etalage({
								thumb_image_width: 300,
								thumb_image_height: 400,
								source_image_width: 900,
								source_image_height: 1000,
								show_hint: true,
								click_callback: function(image_anchor, instance_id){
								//点击图片后触发的事件
								}
							});
							// This is for the dropdown list example:
							$('.dropdownlist').change(function(){
								etalage_show( $(this).find('option:selected').attr('class') );
							});

					});
				</script>
				<!----//details-product-slider--->
				<div class="details-left">
					<div class="details-left-slider">
						<ul id="etalage">
							<li>
								<a href="optionallink.html">
									<img class="etalage_thumb_image" src="<s:property value="getGoods().getImgPath()"></s:property>" />
									<img class="etalage_source_image" src="<s:property value="getGoods().getImgPath()"></s:property>" />
								</a>
							</li>
						</ul>
					</div>
					<form class="details-left-info" id="<s:property value="getGoods().getId()"></s:property>" action="user/cart_addToCart.action">
						<div class="details-right-head">
						<h1><s:property value="getGoods().getName()"></s:property></h1>
						<h4><s:property value="getGoods().getColor()"></s:property>版</h4>
						<p class="product-detail-info"> <s:property value="getGoods().getDetails()"></s:property></p>
						<div class="product-more-details">
							<ul class="price-avl">
								<li class="price"><label>￥<s:property value="getGoods().getPrice()"></s:property></label></li>
								<div class="clear"> </div>
							</ul>
							<ul class="product-colors">
								<h3>颜色 :</h3>
								<li><a class="color1 color"  href="goods_foreground/goods_detailByColorAndName?color=grey&name=<s:property value="getGoods().getName()"></s:property>" ><span> </span></a></li>
								<li><a class="color2 color"  href="goods_foreground/goods_detailByColorAndName?color=blue&name=<s:property value="getGoods().getName()"></s:property>" ><span> </span></a></li>
								<li><a class="color3 color"  href="goods_foreground/goods_detailByColorAndName?color=red&name=<s:property value="getGoods().getName()"></s:property>" ><span> </span></a></li>
								<li><a class="color4 color"  href="goods_foreground/goods_detailByColorAndName?color=black&name=<s:property value="getGoods().getName()"></s:property>" ><span> </span></a></li>
								<li><a class="color5 color"  href="goods_foreground/goods_detailByColorAndName?color=yellow&name=<s:property value="getGoods().getName()"></s:property>" ><span> </span></a></li>
								<div class="clear"> </div>
							</ul>
							<ul class="prosuct-qty">
								<span>数量:</span>
								<select name="goodsItem.num">
									<option>1</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
									<option>6</option>
									<option>7</option>
									<option>8</option>
								</select>
								<input type="text" style="display:none;" name="goodsItem.goods.id"  value="<s:property value="getGoods().getId()"></s:property>"/>
							</ul>
						</div>
					</div>
					<button type="submit"  clsss="btn btn-danger">添加购物车</button>
					</form>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<!----product-rewies---->
			<div class="product-reviwes">
				<div class="wrap">
				<!--vertical Tabs-script-->
				<!---responsive-tabs---->
					<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
					<script type="text/javascript">
						$(document).ready(function () {
							 $('#horizontalTab').easyResponsiveTabs({
									type: 'default', //Types: default, vertical, accordion           
									width: 'auto', //auto or any width like 600px
									fit: true,   // 100% fit in a container
									closed: 'accordion', // Start closed if in accordion view
									activate: function(event) { // Callback function if tab is switched
									var $tab = $(this);
									var $info = $('#tabInfo');
									var $name = $('span', $info);
										$name.text($tab.text());
										$info.show();
									}
								});
													
							 $('#verticalTab').easyResponsiveTabs({
									type: 'vertical',
									width: 'auto',
									fit: true
								 });
						 });
					</script>
				<!---//responsive-tabs---->
				<!--//vertical Tabs-script-->
				<!--vertical Tabs-->
        		<div id="verticalTab">
		            <ul class="resp-tabs-list">
		                <li>详情描述</li>
		               
		            </ul>
		            <div class="resp-tabs-container vertical-tabs">
		                <div>
		                	<h3> 描述</h3>
		                    <p><s:property value="getGoods().getDetails()"></s:property></p>
		                </div>
		            </div>
       		</div>
       		<div class="clear"> </div>
			</div>
			</div>
			<div class="clear"> </div>
			<!--//vertical Tabs-->
			<!----//product-rewies---->
			<!---//End-product-details--->
			</div>
		</div>
		<!--- //End-content---->
		<!---start-footer---->
</body>
</html>




